<script setup lang="ts">
import { ref } from "vue";

let navIndex = ref<number>(0);
function checkIndex(index: number) {
  navIndex.value = index;
}
// 跳转到充电详情页面
// function gotoList(){
//   uni.navigateTo({
//     url:'../../'
//   })
// }
</script>
<template>
  <div class="my-order">
    <div class="my-order-top">
      <div :class="navIndex == 0 ? 'active' : ''" @click="checkIndex(0)">
        充电中
      </div>
      <div :class="navIndex == 1 ? 'active' : ''" @click="checkIndex(1)">
        消费记录
      </div>
    </div>
    <template v-if="navIndex == 0">
      <div class="my-order-main">
        <div class="my-order-main-top">
          <div>车牌号：冀G5TM88</div>
          <div>1号桩-右枪</div>
        </div>
        <div class="my-order-main-echarts">
          <div class="my-order-echarts"></div>
        </div>
        <div class="my-order-main-power">
          <div>电压 (v) 336.4</div>
          <div>电流 (A) 45.6</div>
          <div>功率 (kw) 15339.84</div>
        </div>
        <div class="link"></div>
        <div class="my-order-main-footer">
          <div class="classes">
            <div style="margin-bottom: 16rpx">已充电量</div>
            <div style="color: #591eff">5.6度</div>
          </div>
          <div class="border"></div>
          <div class="classes">
            <div style="margin-bottom: 16rpx">已充时长</div>
            <div style="color: #591eff">80分</div>
          </div>
          <div class="border"></div>
          <div class="classes">
            <div style="margin-bottom: 16rpx">电费合计</div>
            <div style="color: #591eff">99元</div>
          </div>
        </div>
      </div>
      <navigator
        class="my-order-footer"
        url="/subpkg/DetailsChargeing/DetailsChargeing"
      >
        <button class="my-order-end">结束充电</button>
      </navigator>
    </template>
    <template v-if="navIndex == 1">
      <div>
        <uni-list-chat
          title="uni-app"
          avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
          note="您收到一条新的消息"
          time="2020-02-02 20:20"
          badge-positon="left"
          badge-text="dot"
          to="../../subpkg/MessageDetails/MessageDetails"
        ></uni-list-chat>
        <uni-list-chat
          title="uni-app"
          avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
          note="您收到一条新的消息"
          time="2020-02-02 20:20"
          badge-positon="left"
          badge-text="dot"
        ></uni-list-chat>
      </div>
    </template>
  </div>
</template>
<style lang="less">
.my-order {
  width: 100vw;
  height: 100vh;
  background-color: #e0e7f0;
  .my-order-top {
    font-size: 24rpx;
    font-weight: 700;
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    margin-bottom: 5px;
  }
  .my-order-main {
    height: 800rpx;
    background-color: #fff;
    margin-bottom: 1px;
    .my-order-main-top {
      height: 96rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40rpx;
      border: 1px solid #e1e7f0;
    }
    .my-order-main-echarts {
      margin-top: 60rpx;
      margin-bottom: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .my-order-echarts {
        width: 280rpx;
        height: 280rpx;
        background-color: aqua;
      }
    }
    .my-order-main-power {
      font-size: 28rpx;
      padding: 0 10rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .link {
      margin: auto;
      width: 690rpx;
      height: 1px;
      background-color: #e1e7f0;
    }
    .my-order-main-footer {
      padding: 0 20rpx;
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .border {
        width: 1px;
        height: 108rpx;
        border-right: 1px solid #e1e7f0;
      }
      .classes {
        font-size: 28rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .my-order-footer {
    display: flex;
    justify-content: center;
    margin-top: 100rpx;
    .my-order-end {
      width: 600rpx;
      height: 98rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1f1eff;
    }
  }
  .active {
    color: #1f1eff;
    padding-bottom: 5px;
    border-bottom: 1px solid #1f1eff;
  }
}
</style>
